<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      <el-breadcrumb-item>长者档案</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="18" :offset="2">
        <el-form :inline="true" :model="SearchForm" class="demo-form-inline">
          <el-form-item>
            <el-select @change="change" v-model="SearchForm.careId">
              <el-option label="护理等级" :value="0"></el-option>
              <el-option :label="item.level" :value="item.id" v-for="item in careList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select @change="change" v-model="SearchForm.labelId">
              <el-option label="标签" :value="0"></el-option>
              <el-option :label="item.labeltype" :value="item.id" v-for="item in labelList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select @change="change" v-model="SearchForm.status" placeholder="请选择">
              <el-option label="在院状态" :value="-1"></el-option>
              <el-option label="退房" value="0"></el-option>
              <el-option label="入住" value="1"></el-option>
              <el-option label="待退房" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input @change="change" v-model="SearchForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table
        :data="OlderList"
        style="width: 100%;text-align: center">
      <el-table-column label="编号" type="index" align="center"></el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          align="center">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别"
          align="center">
      </el-table-column>
      <el-table-column
          prop="bed.bedname"
          label="床位号"
          align="center">
      </el-table-column>
      <el-table-column
          prop="idcard"
          label="身份证号"
          align="center">
      </el-table-column>
      <el-table-column
          prop="tel"
          label="联系电话"
          align="center">
      </el-table-column>
      <el-table-column
          prop="checkdate"
          label="入住日期"
          align="center">
      </el-table-column>
      <el-table-column
          prop="exitdate"
          label="出院日期"
          align="center">
      </el-table-column>
      <el-table-column
          prop="status"
          label="在院状态"
          align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0">退房</el-tag>
          <el-tag v-if="scope.row.status == 1">入住</el-tag>
          <el-tag v-if="scope.row.status == 2">待退房</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6 , 12, 24]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>

<!--    修改长者信息-->
    <el-dialog title="修改长者信息" :visible.sync="updateOlderDialogVisible"
               width="50%" @close="updateOlderFormClose" :close-on-click-modal="false">
      <el-form
          :model="updateOlderForm"
          :rules="updateOlderFormRules"
          ref="updateOlderFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="头像" prop="img">
          <el-upload
              name="imgUrl"
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard">
          <el-input v-model="updateOlderForm.idcard"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="updateOlderForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="updateOlderForm.sex" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="updateOlderForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系电话" prop="emergencytel">
          <el-input v-model="updateOlderForm.emergencytel"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="updateOlderForm.age"></el-input>
        </el-form-item>
        <el-form-item label="家庭地址" prop="address">
          <el-input v-model="updateOlderForm.address"></el-input>
        </el-form-item>
        <el-form-item label="老人身体状况" prop="healthy">
          <el-input v-model="updateOlderForm.healthy"></el-input>
        </el-form-item>
        <el-form-item label="合同模板" prop="contractId">
          <el-select  v-model="updateOlderForm.contractId">
            <el-option  :label="item.contractname" :value="item.id" v-for="item in contractList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="labelId">
          <el-select v-model="updateOlderForm.labelId">
            <el-option :label="item.labeltype" :value="item.id" v-for="item in labelList"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateOlder">保存</el-button>
        <el-button @click="updateOlderFormClose">取 消</el-button>
      </span>
    </el-dialog>
<!--    查看长者详细信息-->
    <el-dialog title="长者详情" :visible.sync="OlderDetailDialogVisible"
               width="80%" @close="OlderDetailFormClose" :close-on-click-modal="false">
      <el-descriptions v-model="Older" class="margin-top" title="带边框列表" :column="3"  border>
        <template slot="extra">
          <el-button type="primary" size="small">操作</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            头像
          </template>
          <el-image :scr="Older.img"></el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{Older.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            性别
          </template>
          {{Older.sex}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            年龄
          </template>
          {{Older.age}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            身份证号
          </template>
          {{Older.idcard}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            电话
          </template>
          {{Older.tel}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            家庭地址
          </template>
          {{Older.address}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            入住日期
          </template>
          {{Older.checkdate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            出院日期
          </template>
          {{Older.exitdate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            在院状态
          </template>
          <el-tag v-if="Older.status == 0">退房</el-tag>
          <el-tag v-if="Older.status == 1">入住</el-tag>
          <el-tag v-if="Older.status == 2">待退房</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            紧急联系人电话
          </template>
          {{Older.emergencytel}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            身体健康情况
          </template>
          {{Older.healthy}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            综合服务费
          </template>
          {{Older.totalmoney}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            合同模板
          </template>
          <el-tag>{{Older.contract ? Older.contract.contractname : ''}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            护理级别
          </template>
          <el-tag>{{Older.care ? Older.care.level : ''}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            床位编号
          </template>
          <el-tag>{{Older.bed ? Older.bed.bedname : ''}}</el-tag>

        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            标签
          </template>
          <el-tag>{{Older.label ? Older.label.labeltype : ''}}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-tabs v-model="activeName" @tab-click="handleClick" style="text-align: center">
        <el-tab-pane label="长者动态" name="first">长者动态</el-tab-pane>
        <el-tab-pane label="健康档案" name="second">健康档案</el-tab-pane>
        <el-tab-pane label="一卡通流水" name="third">一卡通流水</el-tab-pane>
        <el-tab-pane label="资料信息" name="fourth">资料信息</el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!--    添加长者信息-->
    <el-dialog title="添加长者信息" :visible.sync="addOlderDialogVisible"
               width="50%" @close="addOlderFormClose" :close-on-click-modal="false" top="25px">
      <el-steps :active="active" simple>
        <el-step title="基本信息登记" icon="el-icon-edit"></el-step>
        <el-step title="入住设置" icon="el-icon-upload"></el-step>
        <el-step title="头像上传" icon="el-icon-picture"></el-step>
      </el-steps>
      <el-form
          ref="addOlderForm"
          :model="addOlderForm"
          :rules="addOlderformRules"
          label-position="left"
          label-width="150px"
          style="width: 500px;margin-left: 50px;margin-top: 50px">

        <div v-show="active == 1">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="addOlderForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-input v-model="addOlderForm.sex" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="addOlderForm.age" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="身份证号" prop="idcard">
            <el-input v-model="addOlderForm.idcard" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="联系电话" prop="tel">
            <el-input v-model="addOlderForm.tel" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="addOlderForm.address" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="入住日期" prop="checkdate">
            <el-date-picker
                v-model="addOlderForm.checkdate"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="紧急联系人电话" prop="emergencytel">
            <el-input v-model="addOlderForm.emergencytel" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="身体健康情况" prop="healthy">
            <el-input v-model="addOlderForm.healthy" placeholder="请输入" />
          </el-form-item>
        </div>
        <div v-show="active == 2">
          <el-form-item label="标签" prop="labelId">
            <el-select v-model="addOlderForm.labelId">
              <el-option :label="item.labeltype" :value="item.id" v-for="item in labelList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="护理级别" prop="careId">
            <el-select v-model="addOlderForm.careId">
              <el-option :label="item.level" :value="item.id" v-for="item in careList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="床位号" prop="bedId" :inline="true">
            <el-input v-model="addOlderForm.bedId" placeholder="请选择" readonly="true" />
            <el-button>选择</el-button>
          </el-form-item>
          <el-form-item label="合同模板" prop="contractId">
            <el-select v-model="addOlderForm.contractId">
              <el-option :label="item.contractname" :value="item.id" v-for="item in contractList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="综合服务费" prop="totalmoney">
            <el-input v-model="addOlderForm.totalmoney" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="在院状态" prop="status">
            <el-select v-model="addOlderForm.status" placeholder="请选择">
              <el-option label="在院状态" :value="-1"></el-option>
              <el-option label="退房" value="0"></el-option>
              <el-option label="入住" value="1"></el-option>
              <el-option label="待退房" value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-show="active == 3">
          <el-form-item label="头像" prop="img">
            <el-upload
                name="imgUrl"
                class="avatar-uploader"
                action=""
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </div>

      </el-form>
      <el-button v-if="active > 1" style="margin-top: 12px" @click="pre">上一步</el-button>
      <el-button v-if="active < 3" style="margin-top: 12px" @click="next">下一步</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOlder">确定</el-button>
        <el-button @click="addOlderFormClose">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return{
      active:1,
      SearchForm:{
        careId:0,
        labelId:0,
        status:-1,
        name:'',
      },
      careList:[],
      labelList:[],
      contractList:[],
      OlderList:[],
      pageNum: 1,
      pageSize: 3,
      total:9,
      updateOlderDialogVisible:false,
      updateOlderForm:{

      },
      imageUrl: '',
      updateOlderFormRules:{
      },
      OlderDetailDialogVisible:false,
      Older:{
        contract:{},
        care:{},
        bed:{},
        label:{}
      },
      addOlderDialogVisible:false,
      addOlderForm:{},
      addOlderFormRules:{},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime()+24*3600*1000 < Date.now();
        },
      }
    }
  },
  methods:{
    change(){
      this.initOlderData()
    },
    //打开添加框
    openAddOlderDialog() {
      this.addOlderForm = {};
      this.active = 1;
      this.addOlderDialogVisible = true;

    },
    // 步骤条下一步的方法
    next() {
      if (this.active++ > 2) this.active = 1
    },
    // 步骤条上一步的方法
    pre() {
      if (this.active-- < 2) this.active = 1
    },
    addOlderFormClose(){
      this.addOlderDialogVisible = false;
      this.addOlderForm = {};
    },
    //添加老者信息
    addOlder(){
      let url = "/older/insertOlder";
      this.$refs.addOlderForm.validate((val)=>{
        if(val){
          this.$axios.post(url,this.addOlderForm).then((res)=>{
            if(res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.addOlderDialogVisible = false;
              this.initOlderData();
            }else {
              this.$message({
                message: res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        }else {
          alert("请完善信息")
        }
      })
    },


    //查看长者详情数据
    openDetail(older){
      this.OlderDetailDialogVisible = true;
      this.Older = older;
      console.log(this.Older);
    },
    OlderDetailFormClose(){
      this.OlderDetailDialogVisible = false;
    },

    //打开修改框
    openEdit(id) {
      this.updateOlderDialogVisible = true;
      let url = "/older/selectOlderById?id="+id;
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.updateOlderForm = res.data.data;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    //修改头像之前
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg';
      const isLt20M = file.size / 1024 / 1024 < 20;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt20M) {
        this.$message.error('上传头像图片大小不能超过 20MB!');
      }
      return isJPG && isLt20M;
    },
    //修改头像之后
    handleAvatarSuccess(res,file){
      this.imageUrl = URL.createObjectURL(file.raw);
      this.updateCarform.carimg = res;
    },
    updateOlderFormClose(){
      this.updateOlderDialogVisible = false;
    },
    //保存修改信息
    updateOlder(){
      let url = "/older/updateOlder";
      this.$refs.updateOlderFormRef.validate((val)=>{
        if(val){
          this.$axios.post(url,this.updateOlderForm).then((res)=>{
            if(res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.updateOlderDialogVisible = false;
              this.initOlderData();
            }else {
              this.$message({
                message: res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        }else {
          alert("请完善信息")
        }
      })
    },

    //分页查询
    search() {
      this.pageNum = 1;
      this.initOlderData();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNum = 1;
      this.initOlderData();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initOlderData();
    },
    initOlderData(){
      let url = "/older/selectOlderByCons";
      this.$axios.get(url,{
        params:{
          now:this.pageNum,
          size:this.pageSize,
          name:this.SearchForm.name,
          status:this.SearchForm.status,
          labelId:this.SearchForm.labelId,
          careId:this.SearchForm.careId
        }
      }).then((res)=>{
        if(res.data.code == 200){
          this.OlderList = res.data.data.list;
          this.total = res.data.data.total;
          console.log(this.OlderList);
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    initCareData(){
      let url = "/older/selectAllCare";
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.careList = res.data.data;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    initLabelData(){
      let url = "/older/selectAllLabel";
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.labelList = res.data.data;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    initContractData(){
      let url = "/older/selectAllContract";
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.contractList = res.data.data;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    }
  },
  created() {
    this.initOlderData();
    this.initCareData();
    this.initLabelData();
    this.initContractData();
  }
}
</script>

<style scoped>

</style>